<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.top {
		height: 26px;
		background-color: #f6f6f6;
		border-bottom: 1px solid #ccc;
	}

	.top_info {
		width: 980px;
		line-height: 26px;
		margin: 0 auto;
		color: #390;
		font-size: 12px;

		display: flex;
		justify-content: space-between;
	}

	.nav {
		background: url(/images/nav_bg.png)repeat-x;
		height: 55px;
		line-height: 55px;
	}
	.nav_body{
		width:980px;
		height: 55px;
		overflow: hidden;
		margin: 0 auto;
	}
	.nav_body ul{
		list-style: none;
	}
	.nav_body .left{
		
	}
</style>

<template>
	<div class="home">
		<!-- 顶栏 -->
		<div class="top">
			<div class="top_info">
				<div class="top_l">{{top_left_msg}}</div>
				<div class="top_r">
					<router-link :to="{path:'/register'}">
						注册
					</router-link>
					<span style="padding: 0 5px;">|</span>
					<router-link :to="{path:'/login'}">
						登录
					</router-link>
				</div>
			</div>
		</div>
		<!-- 导航栏 -->
		<div class="nav">
			<div class="nav_body">
				<ul class="left">
					<li><a href="javascript:;" class="active" @click="switchNav($event)">网站首页</a></li>
					<li v-for="item in navs" v-bind:key="item.id">
						<a href="javascript:;" class="active" @click="switchNav($event)" v-text="item.title"></a></li>
				</ul>
				<ul class="right">
					<li>攻略</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: "hello",
				top_left_msg: "欢迎光临188旅游网站管理系统 ！",

			}
		},
		mounted: function() {
			layui.use('element', function() {
				var element = layui.element;
			});
		},
	}
</script>
